<template>
    <view class="content" :style="{ height: windowHeight + 'px' }">
        <view class="view">
            <scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
                :refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
                @refresherrefresh="onRefresh" @refresherrestore="onRestore">
                <view class="items" v-for="(item, index) in list" :key="index" @click="goTos(item)">
                    <view class="header">
                        <view class="title">{{ '系统公告' }}</view>
                        <view :class="!item.isRead ? 'red' : ''"></view>
                    </view>
                    <view class="bottom">
                        <view class="answer">{{ item.noticeTitle }}</view>
                        <view class="date">{{ item.createTime }}</view>
                    </view>
                </view>
                <view class="zanwu" v-if="list.length == 0">暂无数据</view>
                <u-loadmore v-if="list.length != 0" fontSize="25" :status="status" />
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { systemInfo } from '../../utils/mixin'
import { noticeList } from '@/api/index.js'
export default {
    components: {},
    mixins: [systemInfo],
    data() {
        return {
            list: [
            ],


            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            status: 'loadmore',
            triggered: false,
            downRefresh: false,
            pageCount: 0,
        }
    },
    onLoad() {
        // 状态栏高度
        this.getSystemInfo();

        this.triggered = true;
        this.downRefresh = true
        this.queryParams.pageNum = 1
        this.list = []
        this.getcollectList()
    },
    methods: {
        async getcollectList() {
            const res = await noticeList({ ...this.queryParams, noticeType: 1 })
            this.pageCount = res.total
            res.rows.forEach(element => {
                element.createTime = element.createTime.split(' ')[0]
            });
            //停止加载中
            this.triggered = false;
            this.downRefresh = false
            //处理完逻辑停止刷新
            uni.stopPullDownRefresh();
            if (this.list.length >= this.pageCount) {
                this.status = 'nomore';
            } else {
                let arr = [...this.list, ...res.rows]
                this.list = arr
                if (res.rows.length < 10) {
                    this.status = 'nomore';
                }
            }
        },

        //触底加载
        lowerBottom() {
            if (this.queryParams.pageNum < this.pageCount) {
                if (!this.downRefresh) {
                    this.downRefresh = true
                    this.status = 'loading';
                    this.queryParams.pageNum += 1
                    this.getcollectList()
                }
            }
        },
        onRefresh() {
            this.triggered = true;
            this.downRefresh = true
            this.queryParams.pageNum = 1
            this.list = []
            this.getcollectList()
        },
        onRestore() {
            this.triggered = false; // 需要重置
        },
        goTos(item) {
            uni.navigateTo({
                url: "/subpackage2/notice/teacherNotice?title=" + item.noticeTitle + '&id=' + item.noticeId
            })
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    background-color: rgb(245, 245, 245);
    width: 100%;
    box-sizing: border-box;

    .view {
        width: calc(100% - 60rpx);
        height: calc(100% - 60rpx);
        margin-top: 30rpx;
        box-sizing: border-box;
        padding: 30rpx;
        background-color: #fff;
        position: relative;
        top: 30rpx;
        margin: auto;
        overflow: auto;

        .zanwu {
            font-size: 30rpx;
            color: #b3adad;
            text-align: center;
            margin-top: 20px;
        }


        .box_scroll {
            height: 100%;
        }


        .items {
            width: 100%;
            height: 140rpx;
            border-bottom: 1px solid rgba(179, 173, 173, 0.2);
            display: flex;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;

            .header {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .title {
                    font-size: 34rpx;
                }

                .red {
                    width: 8rpx;
                    height: 8rpx;
                    background-color: red;
                    border-radius: 50%;
                }

                .grey {
                    width: 8rpx;
                    height: 8rpx;
                    background-color: rgb(179, 173, 173);
                    border-radius: 50%;
                }
            }

            .bottom {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 20rpx;
                color: rgb(179, 173, 173);
                margin-top: 15rpx;
            }
        }

    }
}
</style>